<template>
<view>
	<view class="group-box" :style="'min-height:calc(100vh - 122rpx - '+CustomBar+'px)'">
		<view class="caption" @click="chooseContract">
			<text>郑州商品交易所-纯碱2401</text>
			<image src="@/static/home/subpage/drop-gray.png"></image>
		</view>
		<view class="hot-title">
			<view class="left">
				<view class="title-text">持仓量汇总</view>
			</view>
		</view>
		<view v-if="true" class="bodys">
			<view class="info-box">
				<view class="date">
					<text>数据时间11-7</text>
					<text>看当日排行</text>
				</view>
				<view class="fix-box">
					<view class="tab">
						<image src="@/static/home/subpage/charts11.png"></image>
						<text>多单持仓</text>
						<text>432661手</text>
					</view>
					<view class="tab">
						<image src="@/static/home/subpage/charts12.png"></image>
						<text>空单持仓</text>
						<text>432661手</text>
					</view>
					<view class="tab">
						<image src="@/static/home/subpage/charts5.png"></image>
						<text>多空比</text>
						<text>0.90</text>
					</view>
				</view>
			</view>
			<view class="qiun-charts-box">
				<view class="legend">
					<text>手</text>
				</view>
				<view class="qiun-charts">
					<l-echart ref="mixChart" @finished="mixInit"></l-echart>
				</view>
			</view>
			<slider-range
			  :value="[30, 90]"
			  :min="5"
			  :max="200"
			  :step="5"
				height="18"
			  :bar-height="7"
			  :block-size="16"
			  background-color="#fff"
			  active-color="#EAF0FD"
			  :format="format"
				:tipVisible="false"
			  :decorationVisible="true"
			  @change="handleRangeChange"
			></slider-range>
		</view>
		<view v-else class="nodata">
			<image src="@/static/home/subpage/no-data.png"></image>
		</view>
		<view class="hot-title">
			<view class="left">
				<view class="title-text">期货公司排名</view>
				<image src="@/static/home/subpage/query.png"></image>
			</view>
			<view class="check" @click="monthCalendar">
				<text>{{curdate}}</text>
				<image src="@/static/home/subpage/drop-gray.png"></image>
			</view>
		</view>
		<view class="navbar-box">
			<view class="box">
				<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">多单持仓</view>
				<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">空单持仓</view>
				<view class="li" :class="{'active':navfixIndex==2}" @click="navfix(2)">净持仓</view>
				<view class="li" :class="{'active':navfixIndex==3}" @click="navfix(3)">成交量</view>
			</view>
		</view>
		<block v-if="true">
		<view class="pie-box" v-if="navfixIndex!=2">
			<view class="left">
				<l-echart ref="pieChart" @finished="pieInit"></l-echart>
			</view>
			<view class="right">
				<view class="table">
					<view class="tr">
						<view class="tl">会员简称</view>
						<view class="tl">多单持仓/占比</view>
					</view>
					<view class="box">
						<view class="row" v-for="(item,index) in 5">
							<view class="tl">
								<view class="flex">
									<view class="circle"></view>
									<text>国泰君安</text>
								</view>
							</view>
							<view class="tl">
								<view class="sup">58343</view>
								<view class="sub">13.48%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="table-box">
			<view class="table">
				<view class="tr">
					<view class="tl">名次</view>
					<view class="tl">会员简称</view>
					<view class="tl">
						<text>多单持仓</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom icn-red"></view>
						</view>
					</view>
					<view class="tl">
						<text>增减</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom"></view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="row" v-for="(item,index) in 5">
						<view class="tl">{{index+1}}</view>
						<view class="tl">国泰君安</view>
						<view class="tl">58343</view>
						<view class="tl">479</view>
					</view>
				</view>
				<view class="total">
					<view class="lab">合计</view>
					<view class="amount">
						<text>432661</text>
						<text class="cl-green">-39390</text>
					</view>
				</view>
			</view>
		</view>
		</block>
		<view v-else class="nodata">
			<image src="@/static/home/subpage/no-data.png"></image>
		</view>
	</view>
</view>
</template>

<script>
	import * as echarts from '@/utils/echarts.min.js';
	export default {
		name:"ranking",
		data() {
			return {
				CustomBar: this.CustomBar,
				navfixIndex:0,
				rangeValue:[0,0],
				mixOption:{},
				pieOption:{},
				animationData: {},
				animation:{},
				animation1Data: {},
				iscontract: false,
				ismonthCalendar: false,
				checkDate: new Date(),
			};
		},
		props:{
			// qhdate: [String,Number],
			curdate:{
				type: [String,Number],
				default: ''
			}
			// date1:{
			// 	type: Array,
			// 	default(){
			// 		return []
			// 	}
			// }
		},
		mounted(){
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation =animation;
		},
		methods:{
			mixInit() {
				this.mixOption={
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '2',
						left:'0',
						top:'10',
						bottom:'2',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							axisTick: {
								show: false,
								alignWithLabel: true
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							data: ['10-25', '10-26', '10-27', '10-25', '10-25', '10-25', '10-25', '10-25', '10-25', '10-25', '10-25', '10-25'],
							axisLabel: {
								show: true,
								margin: 12,
								formatter: function (value, index) {
									if(index==0||index==11) return value;
								},
								showMinLabel : true,
								showMaxLabel : true,
							},
						}
					],
					yAxis: [
						{
							type: 'value',
							// name: '手',
							position: 'left',
							alignTicks: true,
							// offset: 80,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
						},
						{
							type: 'value',
							// name: '手',
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							}
						}
					],
					series: [
						{
							name: '多单持仓',
							type: 'bar',
							yAxisIndex: 0,
							barWidth:'7',
							data: [
								2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
							],
							itemStyle:{
								color:'#EE5953'
							}
						},
						{
							name: '空单持仓',
							type: 'bar',
							yAxisIndex: 0,
							barWidth:'7',
							data: [
								2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
							],
							itemStyle:{
								color:'#FFA200'
							},
						},
						{
							name: '多空比',
							type: 'line',
							yAxisIndex: 1,
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
							symbol: 'none',
							itemStyle:{
								color:'#0BDEC9'
							},
							lineStyle:{
								width:2
							},
						}
					]
				}
				this.$refs.mixChart.init(echarts, chart=> {
					chart.setOption(this.mixOption);
				});
			},
			pieInit(){
				this.pieOption={
					legend: {
						show:false
					},
					series: [
						{
							name: '多单持仓',
							type: 'pie',
							radius: ['70%', '95%'],
							avoidLabelOverlap: false,
							center: ['49%', '50%'],
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 13,
									// formatter: '{b}: {d}',
									formatter: function (value, index) {
										return `${value.name}: ${value.percent}%`
									},
									color: 'rgba(0,0,0,0.45)'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{ value: 1048, name: '国泰君安' },
								{ value: 735, name: '中信期货' },
								{ value: 580, name: '先锋期货' },
								{ value: 484, name: '信达期货' },
								{ value: 300, name: '永安期货' }
							]
						}
					]
				};
				this.$refs.pieChart.init(echarts, chart=> {
					chart.setOption(this.pieOption);
				});
			},
			format(val) {
				return val + '%'
			},
			handleRangeChange(e) {
				this.rangeValue = e;
				// console.log(this.rangeValue);
			},
			navfix(index){
				this.navfixIndex =index;
				if(this.$refs.pieChart){
					if(index!=2) this.pieInit();
				}
			},
			monthCalendar(){
				this.$emit('monthCalendar', {
					// isshare: false
				})
			},
			closemonthCalendar(){
				this.$emit('closemonthCalendar', {
					// isshare: false
				})
			},
			chooseContract(){
				this.$emit('chooseContract', {
					// isshare: false
				})
			},
			closeContract(){
				this.$emit('closeContract', {
					// isshare: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.group-box{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:24rpx;
	box-sizing: border-box;
	.caption{
		display: flex;
		align-items: center;
		border-bottom:2rpx solid #F6F7F9;
		padding-bottom:24rpx;
		& image{
			width:46rpx;height:46rpx;
			margin-left:8rpx;
		}
		& text{
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
		}
	}
	.hot-title{
		padding-bottom:26rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:24rpx;
		.left{
			display: flex;
			align-items: center;
			.title-text{
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}
			& image{
				width:46rpx;height:46rpx;
			}
		}
		.check{
			display: flex;
			align-items: center;
			& image{
				width:46rpx;height:46rpx;
			}
			& text{
				font-size: 28rpx;
				color: rgba(0,0,0,0.8);
			}
		}
	}
	.hot-title::after{
		content: '';
		position: absolute;
		left:0;bottom:0;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
	}
	.bodys{
		border-bottom: 2rpx solid #F6F7F9;
		padding-bottom:18rpx;
		.info-box{
			margin-top:24rpx;
			padding:24rpx 24rpx 52rpx;
			background: #F4F5F7;
			border-radius: 16rpx;
			.date{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(0,0,0,0.4);
				& text:last-child{
					font-size: 24rpx;
					color: #356FE5;
				}
			}
			.fix-box{
				margin-top:16rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.tab{
					display: flex;
					align-items: center;
					width: 50%;
					margin-top:8rpx;
					& image{
						width:48rpx;height:48rpx;
					}
					& text{
						font-size: 24rpx;
						color: rgba(0,0,0,0.6);
					}
					& text:last-child{
						font-weight: bold;
						color: rgba(0,0,0,0.8);
						padding-left:8rpx;
					}
				}
			}
		}
		.qiun-charts-box{
			.legend{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				margin-top:16rpx;
			}
			.qiun-charts{
				width:654rpx;
				height:318rpx;
				margin-top:16rpx;
			}
		}
	}
	.navbar-box{
		margin-top:28rpx;
		background-color: #fff;
		z-index:3;
		position: relative;
		.box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding:4rpx;
			box-sizing: border-box;
		}
		.li{
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			flex:1;
			text-align: center;
			height:100%;
			line-height: 72rpx;
		}
		.li.active{
			background-color: #fff;
			font-weight: bold;
			color: #EE5953;
			border-radius: 16rpx;
		}
	}
	.pie-box{
		display: flex;
		align-items: center;
		margin-top:32rpx;
		// border-bottom: 2rpx solid #F6F7F9;
		// padding-bottom:20rpx;
		.left{
			width: 330rpx;
			height:350rpx;
		}
		.right{
			flex:1;
			.table{
				.tr{
					padding-bottom:8rpx;
					display: flex;
					// border-bottom: 2rpx solid #F4F5F7;
					font-size: 24rpx;
					color: rgba(0,0,0,0.45);
					.tl{
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
				.box{
					.row{
						padding:12rpx 0;
						display: flex;
						// align-items: center;
						justify-content: space-between;
						// border-bottom: 2rpx solid #F4F5F7;
						.tl{
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.tl:nth-child(1){
							align-items: flex-start;
							.flex{
								display: flex;
								align-items: center;
							}
							.circle{
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background: #00B7B2;
							}
							& text{
								font-size: 24rpx;
								font-weight: bold;
								color: rgba(0,0,0,0.8);
								padding-left:16rpx;
							}
						}
						.tl:nth-child(2){
							flex-direction: column;
							justify-content: flex-start;
							align-items: flex-end;
							.sup{
								font-size: 28rpx;
								color: rgba(0,0,0,0.8);
							}
							.sub{
								font-size: 20rpx;
								color: rgba(0,0,0,0.4);
							}
						}
					}
				}
				.tl:nth-child(1){
					flex: 1;
				}
				.tl:nth-child(2){
					width:156rpx;
					margin-left:42rpx;
				}
			}
		}
	}
	.table-box{
		margin-top:28rpx;
		.cl-green{
			color: #33C45B !important;
		}
		.table{
			border-top: 2rpx solid #F6F7F9;
			.tr{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				padding:24rpx 0;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
					.drop{
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-left:8rpx;
						.icn-top{
							width:0rpx;height:0rpx;
							border:8rpx solid transparent;
							border-bottom-color:#BFBFBF;
							border-bottom-width: 10rpx;
							margin-bottom:2rpx;
						}
						.icn-bottom{
							width:0rpx;height:0rpx;
							border:8rpx solid transparent;
							border-top-color:#BFBFBF;
							border-top-width: 10rpx;
							margin-top:2rpx;
						}
						.icn-red{
							border-top-color: #EE5953;
						}
					}
				}
				.tl:nth-child(3){
					padding-right:10rpx;
				}
			}
			.box{
				.row{
					padding:24rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F6F7F9;
					.tl{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
					.tl:nth-child(2){
						color: #356FE5;
					}
					.tl:nth-child(4){
						color: #FF3B30;
					}
				}
			}
			.tl:nth-child(1){
				width:15%;
				justify-content: center;
			}
			.tl:nth-child(2){
				width:30%;
				justify-content: center;
			}
			.tl:nth-child(3){
				width:30%;
				justify-content: flex-end;
			}
			.tl:nth-child(4){
				width:25%;
				justify-content: flex-end;
				padding-right:24rpx;
			}
			.total{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:32rpx 24rpx 32rpx 20rpx;
				.lab{
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
				}
				.amount{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
					& text:last-child{
						padding-left:54rpx;
						color: #FF3B30;
					}
				}
			}
		}
	}
}
.nodata{
	padding-top:82rpx;
	padding-bottom:24rpx;
	text-align: center;
	& image{
		width:294rpx;height:326rpx;
	}
}
</style>